@charset "utf-8";
@function r($px){
    @return $px/100+rem;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html,body{
    height: 100%;
}
.web{
    position: relative;    
    .img{
        width: r(640);
        height: r(1130);
        overflow: hidden;
        img{
            height: 100%;
        }
    }
    .progress{
        -webkit-appearance: none;
        border: none;
        width: r(240);
        height: 20px;
        background-color: whiteSmoke;
        border-radius: 3px;
        box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
        color: royalblue;
    //  position: relative;
        margin: 0 0 1.5em;
        position: absolute;
        top: r(940);
        left: r(230);
        .fat{
            background: linear-gradient(to right,skyblue,yellow,red);
            border-radius: 3px;
            box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
            width: 100%;
            height: 20px;
        }
    }
    .btn{
        width: r(240);   
        height: r(80);
        border-radius: r(40);
        background: lightblue;
        color: coral;
        line-height: r(80);
        text-align: center;
        position: absolute;
        top:r(920);
        left: r(230);
        font-size: r(40);
        display: none;
    }
    
}
//花瓣飘落效果
.subject{
    width: 100%;
    height: 100%;
    background:#FFABAB;
    opacity: 0.5;
    display: none;
    .content{
       width: 100%;
       height: 100%;
       
    }
}
.box{
    width: r(500);
    height: r(500);
    border-radius: 50%;
    background: gray;
    margin: r(100) auto;
    padding: r(30);
    position: relative;
    overflow: hidden;
    .lottery{
        width: r(500);
        height: r(500);
        border-radius: 50%;
        background: cornflowerblue;
        position: relative;
    }
}
